<script setup lang="ts">
import {  ref, watch, onMounted  } from 'vue'

// props
const props = defineProps({
  videoUrl: {
    type: String,
    default: '111'
  }
})
watch(
  () => props.videoUrl,
  (nv, ov) => {
    // console.log('videoUrl----->', nv, ov)
    // eslint-disable-next-line vue/no-mutating-props
    fileUrl.value = props.videoUrl.replace('\\', '/')
    targetIp.value = '/infrared' + fileUrl.value.replace('\\', '/')
    console.log('watch地址-------》', targetIp)
  })
onMounted(() => {
  fileUrl.value = props.videoUrl.replace('\\', '/')
  console.log('onMounted地址-------》', props.videoUrl, fileUrl)
})
const fileUrl = ref('')
const targetIp = ref('')
</script>

<template>
  <div class="video-box">
    <!-- <video
      class="video-item"
      :src="props.videoUrl"
      controls
    /> -->
    <video
      class="video-item"
      :src="targetIp"
      controls
    />
  </div>
</template>

<style lang="scss" scoped>
.video-box {
  width: 153px;
  height: 126px;
  .video-item {
  width: 153px;
  height: 126px;
  }
}
</style>